<template>
  <div class="wallet_mrg_page">
    <div class="search_parent">
      <Search :currentPage="currentPage"></Search>
    </div>

    <div class="order_container">
      <el-table :data="order_list" style="width: 100%">
        <el-table-column prop="createTime" label="日期" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | fiter_date}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="orderId" width="300"></el-table-column>
        <el-table-column label="兑换货币/金额" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.quoteCurrency}} / {{scope.row.quoteAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="目标货币/金额" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.baseCurrency}} / {{scope.row.baseAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageGet">
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="25"
      layout="prev, next, jumper"
      :total="1000">
    </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Search from "./search.vue";
import { State, Getter, Action, Mutation } from "vuex-class";
import axios from "axios";
import { AxiosPromise } from "axios";
import tools from "@/server/tools";
import eventBus from "@/server/eventBus";
import Router from 'vue-router';
const namespace: string = "order_mrg";
@Component({
  components: {
    Search
  },
  filters: {
    fiter_date(time:any){
      return tools.getTime(time)
    }
  }
})
export default class Ordermrg extends Vue {
  @Getter("orderlist", { namespace }) order_list: any;
  @Action("get_order_list", { namespace }) get_order_list: any;
  private currentPage = 1;
  handleEdit = (index: any, row: any) => {
    console.log("handleEdit:", (<any>window).router, row);
    (<any>window).router.push("/home/details/" + (row as any).orderId)
  };

  handleCurrentChange = (val:any) => {
    console.log("handleCurrentChange:", val - 1, this.currentPage)
    this.currentPage = val - 1
    eventBus.$emit("change_page")
  }

  reset_page_ = () => {
    this.currentPage = 1
    console.log("recet page:", this.currentPage)
  }

  reset_page () {
    this.currentPage = 1
    console.log("recet page:", this.currentPage)
  }

  handleDelete = (index: any, row: any) => {
    console.log("handleDelete:", index, row);
  };

  mounted() {
   
  }
}
</script>
<style scoped lang="scss">
.wallet_mrg_page {
  margin: 0 auto;
  .search_parent {
    position: fixed;
    width: 100%;
    height: 50px;
    /* left: 0; */
    z-index: 100;
    margin-top: 0px;
    /* top: 0px; */
  }
  .pageGet{
    margin-top:10px;
    margin-bottom:10px;
    text-align: left;
  }
  .order_container {
    padding-top: 55px;
  }
}
</style>